<template>
  <view class="repair-detail" >
    <!-- 维修信息 -->
    <view class="info-section" >
      <view class="section-title">维修信息</view>
      <view class="info-list" >
        <view class="info-item" >
          <text class="label">维修单号：</text>
          <text class="value">{{ repairInfo.number }}</text>
        </view>
        <view class="info-item">
          <text class="label">车主姓名：</text>
          <text class="value">{{userList.username}}</text>
        </view>
        <view class="info-item">
          <text class="label">联系方式：</text>
          <text class="value">{{repairInfo.phone}}</text>
          <image class="icon" src="/static/phone.png" @tap="makeCall"/>
        </view>
        <view class="info-item">
          <text class="label">维修方式：</text>
          <text class="value">{{repairInfo.type===1 ? '到店维修':'上门取车'}}</text>
        </view>
        <view class="info-item">
          <text class="label">取车位置：</text>
          <text class="value">{{repairInfo.address}}</text>
          <image class="icon" src="/static/location.png" @tap="openMap"/>
        </view>
        <view class="info-item">
          <text class="label">预约日期：</text>
          <text class="value">{{repairInfo.subscribeTime}}</text>
        </view>
        <view class="info-item">
          <text class="label">提交日期：</text>
          <text class="value">{{repairInfo.submitTime}}</text>
        </view>
		<!-- 此部分是到场时间 -->
		<view class="info-item">
		  <text class="label">到场时间：</text>
		  <text class="value">{{repairInfo.presentTime}}</text>
		</view>
      </view>
    </view>

    <!-- 车辆信息 -->
    <view class="info-section">
      <view class="section-title">车辆信息</view>
      <view class="info-list">
        <view class="info-item">
          <text class="label">车辆类型：</text>
          <text class="value">{{ getCarBrand(carList.carType) }}</text>
        </view>
        <view class="info-item">
          <text class="label">车牌号：</text>
          <text class="value">{{ carList.carNumber }}</text>
        </view>
        <view class="info-item">
          <text class="label  car">整车照片：</text>
		   <image class="photo" :src="repairInfo.photo" mode="aspectFit"></image>
        </view>
		
       <view class="image-preview">
          <image :src="detail.carImage" mode="aspectFill"/>
        </view>
        <view class="info-item">
          <text class="label">维修部位照片：</text>
        </view>
        <view class="image-grid">
          <image 
            v-for="(img, index) in detail.repairImages" 
            :key="index"
            :src="img"
            mode="aspectFill"
            @tap="previewImage(index)"
          />
        </view>
      </view>
    </view>

    <!-- 底部按钮 -->
   <button :disabled="isVerified" :class="{ 'disabled-button': isVerified }" @click="confirmVerification">
         {{ isVerified ? '已到场' : '确认到场' }}
    </button>
  </view>
</template>

<script>
export default {
  data() {
    return {
	 itemId: '', // 用于存储从 URL 获取的 ID
	 itemId1:'',
	isVerified: false,
	repairList1:[],
	userList:[],
	carList:[],
	 repairInfo: {},
      detail: {
        orderNo: '3535252',
        ownerName: '张三',
        phone: '19938292282',
        repairType: '上门取车/到店维修',
        address: '山阳区32号',
        appointTime: '2022/11/10 11:00',
        submitTime: '2022/11/08 12:34',
        carType: '大客车',
        carNumber: '豫A45323',
        carImage: '/static/car.jpg',
        repairImages: [
          '/static/repair1.jpg',
          '/static/repair2.jpg',
          '/static/repair3.jpg'
        ]
      }
    }
  },
 //  mounted(option) {
	// // console.log('详情页单号',this.repairList1.number)
 //  	this.getList();
 //  },
  onLoad(options) {
  	
  	
  	      this.itemId = options.id; // 从 URL 中获取 id 并赋值给 data 中的 itemId
  	
  	      // 可以在这里调用 API 获取相关详情
  	
  	      this.getList(this.itemId);
		  this.getList1(this.itemId);
		  this.getList2(this.itemId);
		  
		  // console.log(this.repairInfo)
  
  },
  
  methods: {
	 getCarBrand(carType) {
	       switch (carType) {
	         case 1:
	           return '红旗';
	         case 2:
	           return '宝马';
	         case 3:
	           return '奔驰';
	         case 4:
	           return '奥迪';
	         default:
	           return '';
	       }
	     },
	  
	  //维修列表
	  getList(id) {
	  		let that=this;
			// let id=123;
	  this.$http({
	  	url:`/api/maintain/maintain/${id}`,
	  	method:'GET',
	  	success(res){
	  		that.repairInfo = res.data.data;
	  		console.log(res);
			
	  		console.log("============")
	  		// console.log("repairInfo",this.repairInfo)
	  	}
	  })		
	},
	
	getList1(userId) {
	  		let that=this;
			// let id=123;
	  this.$http({
	  	url:`/api/user/users/${userId}`,
	  	method:'GET',
	  	success(res){
	  		that.userList = res.data.data;
	  		console.log(res);
	  		console.log("================================")
	  		// console.log("userList",this.userList)
	  	}
	  })		
	},
	
	getList2(carId) {
	  		let that=this;
			// let id=123;
	  this.$http({
	  	url:`/api/car/car/${carId}`,
	  	method:'GET',
	  	success(res){
	  		that.carList = res.data.data;
	  		console.log(res);
	  		console.log("***************")
	  		// console.log("userList",this.userList)
	  	}
	  })		
	},
	
	
	
	    confirmVerification() {
	        uni.showModal({
	          content: '是否确认到场',
	          success: (res) => {
	            if (res.confirm) {
	              this.isVerified = true;
	              uni.showToast({
	                title: '已到场',
	                icon: 'success'
	              });
	            }
	          }
	        });
	      },
    // 拨打电话
    makeCall() {
      uni.makePhoneCall({
        phoneNumber: this.detail.phone
      })
    },
    
    // 打开地图
    openMap() {
      // 实现导航功能
    },
    
    // 预览图片
    previewImage(index) {
      uni.previewImage({
        urls: this.detail.repairImages,
        current: index
      })
    },
    
    // 确认到场
    confirmArrival() {
      uni.showModal({
        title: '提示',
        content: '确认已到达维修地点？',
        success: (res) => {
          if (res.confirm) {
            // 确认到场逻辑
          }
        }
      })
    }
  }
}
</script>

<style lang="scss">
	button {
	  width: 50%;
	  font-size: 16px;
	  color: #fff;
	  background-color: #007aff;
	  border: none;
	  border-radius: 5px;
	  text-align: center;
	  margin-top: 20px;
	}
	
	.disabled-button {
	  background-color: #b3b3b3;
	  border: 2rpx solid darkgrey;
	  color: #747474;
	}
.repair-detail {
  min-height: 100vh;
  background: #F5F5F5;
  padding: 20rpx;

  .info-section {
    background: #FFFFFF;
    border-radius: 12rpx;
    padding: 30rpx;
    margin-bottom: 20rpx;

    .section-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 20rpx;
    }

    .info-list {
      .info-item {
        display: flex;
        align-items: center;
        margin-bottom: 20rpx;

        .label {
          width: 180rpx;
          font-size: 28rpx;
          color: #666;
        }
        .car{

		}
        .value {
          flex: 1;
          font-size: 28rpx;
          color: #333;
        }

        .icon {
          width: 40rpx;
          height: 40rpx;
          margin-left: 20rpx;
        }
      }
    }

    .image-preview {
      margin: 20rpx 0;
      
      image {
        width: 100%;
        height: 300rpx;
        border-radius: 8rpx;
      }
    }

    .image-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20rpx;
      margin: 20rpx 0;

      image {
        width: 100%;
        height: 200rpx;
        border-radius: 8rpx;
      }
    }
  }

  .bottom-button {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 20rpx;
    background: #FFFFFF;
    box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);

    .confirm-btn {
      background: #007AFF;
      color: #FFFFFF;
      height: 80rpx;
      line-height: 80rpx;
      border-radius: 40rpx;
      font-size: 30rpx;
    }
  }
}
</style>